<template>
  <van-popup
    v-model:show="cityShow"
    :style="{ height: '80%' }"
    position="bottom">
    <div class="searc-box">
      <van-search
        v-model="searchMap"
        placeholder="请输入搜索关键词"
        @update:model-value="handleEnter" />
      <div
        v-show="isShsow"
        class="list">
        <div
          v-for="item in resultList"
          :key="item.id"
          class="item"
          @click="Marker(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 确定和取消按钮 -->

    <!-- 附近的数据 -->
    <div class="nearby">
      <div class="button">
        <span @click="cityShow = false">取消</span>
        <span @click="confirm">确定</span>
      </div>
      <div
        ref="nearby"
        class="list">
        <div
          v-for="item in peripheryList"
          :key="item.id"
          class="item"
          @click="clickActive(item)">
          <div class="name">{{ item.name }}</div>
          <div class="address">{{ item.address }}</div>

          <i
            v-show="activeItem?.id === item.id"
            class="geek-icon">
            &#xe6b6;
          </i>
        </div>
      </div>
    </div>
    <div id="map"></div>
  </van-popup>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import route from '@/router';
import { showToast } from 'vant';
interface Props {
  lat?: string;
  lng?: string;
  callback?: Function;
  remove?: Function;
}
const props = withDefaults(defineProps<Props>(), {
  lat: '',
  lng: '',
  callback: Function,
  remove: Function
});

const cityShow = ref(true);
const isShsow = ref(false);
watch(
  () => cityShow.value,
  (val) => {
    !val && props.remove();
  }
);

// 路由变化时关闭组件
watch(
  () => route,
  () => {
    cityShow.value = false;
    props.remove();
  },
  {
    deep: true
  }
);
const map = ref<any>(null);
const activeItem = ref<any>({});
// 周边数据搜索
const peripheryList = ref<any>([]);
const searchNear = (keywords: string, position: Array<number>) => {
  AMap.plugin('AMap.PlaceSearch', () => {
    const placeSearch = new AMap.PlaceSearch({
      citylimit: true,
      pageSize: 20,
      pageIndex: 1,
      extensions: 'all'
    });
    // 关键字
    // 中心点经纬度
    // 搜索半径 0-50000
    const radius = 2000;
    placeSearch.searchNearBy(keywords, position, radius, (status: any, result: { poiList: { pois: any } }) => {
      peripheryList.value = result.poiList.pois;
      console.log(peripheryList.value);
      if (props.lat) {
        activeItem.value = peripheryList.value.find((item: any) => item.location.lat === props.lat);
      }
    });
  });
};

const initMap = (center: any) => {
  AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker: any) => {
    map.value = new AMap.Map('map', {
      zoom: 16,
      center,
      scrollWheel: false
    });

    const positionPicker = new PositionPicker({
      mode: 'dragMap',
      map: map.value
    });

    positionPicker.on('success', (positionResult: any) => {
      console.log(positionResult);
      searchNear('', [positionResult.position.lng, positionResult.position.lat]);
    });

    positionPicker.start();
  });
};
const searchMap = ref('');

const resultList = ref<any>([]);
// 搜索
const handleEnter = () => {
  AMap.plugin('AMap.PlaceSearch', () => {
    const placeSearch = new AMap.PlaceSearch({
      // city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
      autoFitView: true
      // map: map.value
    });
    placeSearch.search(searchMap.value, (_status: any, result: { poiList: { pois: any } }) => {
      // 查询的信息
      resultList.value = result.poiList.pois;
      isShsow.value = true;
    });
  });
};

// 点击
const Marker = (item: any) => {
  isShsow.value = false;
  initMap([item.location.lng, item.location.lat]);
  searchNear(item.name, [item.location.lng, item.location.lat]);
};

const nearby = ref();
const clickActive = (item: any) => {
  activeItem.value = item;
  nearby.value.scrollTo({ top: 0 });
  initMap([item.location.lng, item.location.lat]);
};

const confirm = () => {
  if (activeItem.value.name) {
    typeof props.callback === 'function' && props.callback(activeItem.value);
    cityShow.value = false;
  } else {
    showToast('请选择位置');
  }
};
onMounted(() => {
  console.log(props.lat);
  if (props.lng) {
    initMap([props.lng, props.lat]);
  } else {
    initMap();
  }
});
</script>

<style lang="scss" scoped>
:deep(.custom-content-marker) {
  img {
    width: 40px;
  }
}
:deep(.van-popup) {
  position: relative !important;
}
:deep(.amap-copyright) {
  display: none !important;
}
#map {
  width: 100%;
  height: 100%;
}
.searc-box {
  width: 100%;
  padding: 10px 0;
  background: #fff;
  position: absolute;
  top: 0;
  z-index: 5;
  .list {
    position: absolute;
    width: 100%;
    max-height: 400px;
    overflow-y: scroll;
    z-index: 1;
    background: #fff;
    .item {
      font-size: 26px;
      color: #000;
      padding: 20px 30px;
      border-bottom: 1px solid #f5f5f5;
    }
  }
}

.nearby {
  background: #fff;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 5;

  .button {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    span {
      font-size: 26px;
      padding: var(--van-picker-action-padding);
      &:nth-child(1) {
        font-size: var(--van-picker-action-font-size);
        color: var(--van-picker-cancel-action-color);
      }
      &:nth-child(2) {
        font-size: var(--van-picker-action-font-size);
        color: var(--van-picker-confirm-action-color);
      }
    }
  }
  .list {
    padding: 0 30px;
    max-height: 400px;
    overflow-y: scroll;
  }
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    padding-right: 20px;
  }

  .name {
    font-size: 24px;
    color: #464646;
    font-weight: bold;
  }
  .address {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
  }
  .geek-icon {
    font-size: 24px;
    color: #1296fa;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
